<template>
  <div class="music-container">
    <music-title>
      <template #left>
        <h3>推荐专辑</h3>
      </template>
      <template #right>
        <van-icon name="search" class="icon" @click="$router.push('/music/search')"></van-icon>
      </template>
    </music-title>
    <music-banner :banner-list="bannerAlbumData" :singer-list="bannerSingerData" />
    <music-title>
      <template #left>
        <h4>推荐音乐</h4>
      </template>
      <template #right>
        <div class="play-all">
          <span style="margin-right: 5px">播放全部</span>
          <van-icon name="play-circle-o"></van-icon>
        </div>
      </template>
    </music-title>
    <music-scroll :music-list="musicListData" @play-current-music="handlePlayMusic" />
    <music-title>
      <template #left>
        <h4>最新热门歌曲</h4>
      </template>
    </music-title>
    <hot-list :hot-list="hotListData" @play-current-music="handlePlayMusic" />

    <router-view v-slot="{ Component }">
      <transition name="music">
        <keep-alive>
          <component :is="Component" />
        </keep-alive>
      </transition>
    </router-view>

    <van-overlay :show="showLoading" z-index="1004">
      <div class="wrapper">
        <van-loading color="#fff" vertical>加载中</van-loading>
      </div>
    </van-overlay>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, toRefs } from "vue";
import usePlayerStore from "@/store/playerStore";
import mitter from "@/utils/mitt";
import musicTitle from "./components/musicTitle.vue";
import musicBanner from "./components/musicBanner.vue";
import musicScroll from "./components/musicScroll.vue";
import hotList from "./components/hotList.vue";
import { getMusicDetailByListId, getNewHotSongList, getSingerAlbum } from "@/service/api/musicRequest";
import type { IHotSongItem } from "@/types/music/hotSongType";
import type { IAlbumItem } from "@/types/music/albumType";
import type { ISingerItem } from "@/types/music/singerType";
import type { ISearchSongItem } from "@/types/music/searchSongType";

const { recommandMusicList } = toRefs(usePlayerStore());
// 林俊杰 Geebar 毛不易 周杰伦
const singerId = [3684, 47249190, 12138269, 6452],
  // 烟火里的尘埃 盛夏 失眠飞行 打上花火 僕らの手には何もないけど 经济舱
  musicId = [29004400, 569212211, 1365898499, 496869422, 32317208, 1492049185];
const bannerAlbumData = ref<Array<IAlbumItem[]>>([]),
  bannerSingerData = ref<ISingerItem[]>([]),
  musicListData = ref<ISearchSongItem[]>([]),
  hotListData = ref<Array<IHotSongItem[]>>([]);

const showLoading = ref(false);

onMounted(() => {
  try {
    showLoading.value = true;
    Promise.all([getBannerAlbumData(), getMusicListData(), getHotListData()]).then(() => {
      showLoading.value = false;
    });
  } catch (error) {
    console.log(error);
  }
});

// 播放音乐
const handlePlayMusic = (id: number) => {
  mitter.emit("playMusic", id);
};

// 中央banner专辑信息
const getBannerAlbumData = async () => {
  const albumsData: Array<IAlbumItem[]> = [],
    singerData: ISingerItem[] = [];
  for (let i = 0; i < singerId.length; i++) {
    const res = await getSingerAlbum({ id: singerId[i], limit: 3 });
    albumsData.push(res.hotAlbums);
    singerData.push(res.artist);
  }
  bannerAlbumData.value = albumsData;
  bannerSingerData.value = singerData;
};

// 获取推荐歌曲信息
const getMusicListData = async () => {
  const res = await getMusicDetailByListId(musicId.join(","));
  musicListData.value = res.songs;
  recommandMusicList.value = res.songs; // 保存推荐的歌曲
};

// 获取热门歌曲列表信息
const getHotListData = async () => {
  const res = await getNewHotSongList();
  for (let i = 0; i < res.result.length; i += 2) {
    hotListData.value.push(res.result.slice(i, i + 2));
  }
};
</script>

<style scoped lang="scss">
.music-container {
  width: 100vw;
  height: 100%;
  background: linear-gradient(to bottom left, #363131, #383535, #585454);
  overflow-x: hidden;
  .play-all {
    display: flex;
    align-items: center;
  }
  h3 {
    margin: 0;
    font-size: 20px;
  }
  h4 {
    margin: 0;
    font-size: 18px;
  }
  .icon {
    color: #fff;
    font-size: 20px;
  }
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
}

.music-enter-active {
  animation: musicChange 0.6s;
}

.music-leave-active {
  animation: musicChange 0.3s reverse;
}

@keyframes musicChange {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
